<template>
  <div class="login-box">
    <div class="title"
      >欢迎登录
      <span>Welcome to login</span>
    </div>
    <div class="sub-title">
      <img src="@/assets/images/logo-new.png" class="login-logo" />
      <span>流程管理系统</span>
    </div>
    <a-form
      layout="horizontal"
      :model="state.formInline"
      @submit.prevent="handleSubmit"
      class="login-form"
    >
      <a-form-item>
        <a-input v-model:value="state.formInline.username" size="large" placeholder="请输入用户名">
          <template #prefix><user-outlined type="user" /></template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-model:value="state.formInline.password"
          size="large"
          type="password"
          placeholder="请输入密码"
          autocomplete="new-password"
        >
          <template #prefix><lock-outlined type="user" /></template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" size="large" :loading="state.loading" block>
          登录
        </a-button>
      </a-form-item>
    </a-form>
    <div class="footer">
      <img src="/image/login/liucheng.png" class="login-icon" />
      <p>Welcome to codeDriver process management system</p>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive } from 'vue';
  import { UserOutlined, LockOutlined, SafetyOutlined } from '@ant-design/icons-vue';
  import { useRoute, useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import { useUserStore } from '@/store/modules/user';
  import { to } from '@/utils/awaitTo';

  const state = reactive({
    loading: false,
    captcha: '',
    formInline: {
      username: '',
      password: '',
    },
  });

  const route = useRoute();
  const router = useRouter();

  const userStore = useUserStore();

  const handleSubmit = async () => {
    const { username, password } = state.formInline;
    if (username.trim() == '' || password.trim() == '') {
      return message.warning('用户名或密码不能为空！');
    }
    message.loading('登录中...', 0);
    state.loading = true;
    // params.password = md5(password)
    userStore
      .login({
        password: state.formInline.password,
        username: state.formInline.username,
      })
      .then(() => {
        message.success('登录成功！');
        setTimeout(() => router.replace((route.query.redirect as string) ?? '/'));
      });
    state.loading = false;
    message.destroy();
  };
</script>

<style lang="less" scoped>
  .login-box {
    // position: absolute;
    // top: 50%;
    // left: 50%;
    width: 356px;
    height: 420px;
    margin: 80px;
    // transform: translate(-50%, -50%);
    background-color: #fff;

    .title {
      width: 100%;
      // height: 50px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      font-size: 36px;
      color: #333333;
      line-height: 50px;
      text-align: left;
      font-style: normal;
      span {
        font-family: ArialMT;
        font-size: 16px;
        color: #333333;
        line-height: 18px;
        text-align: center;
        font-style: normal;
        margin-left: 20px;
      }
    }
    .sub-title {
      margin-top: 40px;
      font-family:
        PingFangSC,
        PingFang SC;
      font-weight: 500;
      font-size: 20px;
      color: #333333;
      line-height: 28px;
      text-align: left;
      font-style: normal;
      // display: flex;
      // justify-content: space-between;

     img {
        height: 30px;
        margin-right: 30px;
      }
    }
    .login-form {
      padding: 26px 10px 0;

      .a-input {
        margin-bottom: 7px;
      }

      .a-input__inner {
        height: 36px;
        padding-left: 42px;
        border: none;
        background-color: #f4f4f4 !important;
        color: #606266 !important;
      }

      .a-input__prefix {
        padding-left: 10px;

        svg {
          width: 22px;
          height: 22px;
          margin-top: 9px;
        }
      }

      .a-checkbox {
        margin-top: 7px;

        .a-checkbox__label {
          width: 65px;
          color: #bcbcbc;
          font-family: SourceHanSansCN-Regular, SourceHanSansCN;
          font-size: 11px;
          font-weight: 400;
          line-height: 16px;
        }

        .a-checkbox__input.is-checked .el-checkbox__inner {
          border-color: #3370ff;
          background-color: #3370ff;
        }
      }

      .btn {
        margin-top: 65px;

        .a-button {
          width: 100%;
          height: 36px;
          border-color: #3370ff;
          background-color: #3370ff;
        }
      }
    }

    .footer {
      margin-top: 45px;
      text-align: center;

      .login-icon {
        width: 55px;
      }

      p {
        margin: 0;
        color: #a4a4a4;
        font-family: 'HarmonyOS_Sans';
        font-size: 11px;
        line-height: 30px;
      }
    }
  }
</style>
